<style lang="less">
.p-scheduler {
    .c-scheduler {
        height: calc(~"100vh - 130px");
        position: relative;
        overflow: hidden;
    }
}
</style>

<template>
    <div class="p-scheduler">
        <SchedulerComponent ref="refScheduler" :config="config"
            @event-updated="logEventUpdate" />
    </div>
</template>

<script>
import SchedulerComponent from 'public/components/scheduler'

export default {
    components: { SchedulerComponent },
    data() {
        return {
            config: {
                first_hour: 7, // 工作日开始时间
                last_hour: 20, // 工作日结束时间
            },
        };
    },
    mounted() {
        this.scheduler = this.$refs.refScheduler.scheduler
    },
    methods: {
        logEventUpdate(id, action, data) {
            // action: create 添加记录， update 更新记录，delete 删除记录
            // console.log('page-scheduler-logEventUpdate', id, action, data);
        },
        /* Demo: 可以调用scheduler的api，进行操作；*/
        customOption() {
            // 修改配置
            this.scheduler.config.skin = 'material'

            // 添加假期标记
            this.scheduler.addMarkedTimespan({
                days: [0],
                zones: "fullday",
                css: "weekend",
                html: "周末"
            })

            // 添加事件
            scheduler.addEvent({
                start_date: "2023-03-06- 09:00",
                end_date:   "2023-03-06- 12:00",
                text:   "Meeting",
                holder: "John", // userdata
                room:   "5"     // userdata
            });
            this.scheduler.updateView();
        },
    }
};
</script>